<!-- 分销商菜单栏 -->
<template>
    <view class="menu-box ss-flex-col">
      <view class="header-box">
        <image class="header-bg" :src="sheep.$url.static('/assets/addons/shopro/uniapp/commission/rw.jpg')" />
        <view class="ss-flex header-title">
          <view class="title">任务专区</view>
          <text class="cicon-forward"></text>
        </view>
      </view>
      <view class="menu-list ss-flex ss-flex-wrap">
        <view
          v-for="(item, index) in state.menuList"
          :key="index"
          class="item-box ss-flex-col ss-col-center"
          @tap="sheep.$router.go(item.path)"
        >
          <image
            class="menu-icon ss-m-b-10"
            :src="sheep.$url.static(item.img)"
            mode="aspectFill"
          ></image>
          <view>{{ item.title }}</view>
        </view>
      </view>
  
      <!-- <uni-grid :column="4" :showBorder="false" :highlight="false">
        <uni-grid-item
          v-for="(item, index) in state.menuList"
          :index="index"
          :key="index"
          @tap="sheep.$router.go(item.path)"
        >
          <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <image
              class="menu-icon ss-m-b-10"
              :src="sheep.$url.static(item.img)"
              mode="aspectFill"
            ></image>
            <text class="menu-title">{{ item.title }}</text>
          </view>
        </uni-grid-item>
      </uni-grid> -->
    </view>
  </template>
  
  <script setup>
    import sheep from '@/sheep';
    import { onLoad } from '@dcloudio/uni-app';
    import { computed, reactive } from 'vue';
  
    const state = reactive({
      menuList: [
        {
          img: '/assets/addons/shopro/uniapp/commission/fbrw.png',
          title: '发布任务',
          path: '/pages/task/taskcreate',
        },
        {
          img: '/assets/addons/shopro/uniapp/commission/rwlb.png',
          title: '任务列表',
          path: '/pages/task/tasklist',
        },
        {
          img: '/assets/addons/shopro/uniapp/commission/rwjl.png',
          title: '任务记录',
          path: '/pages/task/taskorder',
        },
        {
          img: '/assets/addons/shopro/uniapp/commission/rwsh.png',
          title: '任务审核',
          path: '/pages/task/audition/list',
        },
       
      ],
    });
  </script>
  
  <style lang="scss" scoped>
    .menu-box {
      margin: 0 auto;
      width: 690rpx;
      margin-bottom: 20rpx;
      margin-top: 20rpx;
      border-radius: 12rpx;
      z-index: 3;
      position: relative;
    }
    .header-box {
      width: 690rpx;
      height: 76rpx;
      position: relative;
      .header-bg {
        width: 690rpx;
        height: 76rpx;
      }
      .header-title {
        position: absolute;
        left: 20rpx;
        top: 24rpx;
      }
      .title {
        font-size: 28rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 30rpx;
      }
      .cicon-forward {
        font-size: 30rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 30rpx;
      }
    }
  
    .menu-list {
      padding: 50rpx 0 10rpx 0;
      background: #fdfae9;
      border-radius: 0 0 12rpx 12rpx;
    }
    .item-box {
      width: 25%;
      margin-bottom: 40rpx;
    }
  
    .menu-icon {
      width: 68rpx;
      height: 68rpx;
      background: #ffffff;
      border-radius: 50%;
    }
  
    .menu-title {
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
    }
  </style>
  